<template>
  <div class="container" ref="container" id="container">
    <!-- 存放three.js的渲染效果 -->
    <div id="dom3d" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div>
  </div>
</template>

<script lang="ts" setup name="dcDataCenter3D">
import { onMounted } from 'vue'
//import { Park } from '../../../js/scenes/park'
import { IDC } from './dataCenter'
import { idcData, idcOption, parkOption, parkClickData } from './ossData'

onMounted(() => {
  createWorld(idcOption, idcData)
  //initPark()
})
let world
function createWorld(option, nodeData) {
  const dom3d = document.getElementById('dom3d')
  world = new IDC.DigitalTwin(option, nodeData, dom3d, parkOption)
  window.world = world
}

function loadPark() {
  if (world.getReady()) {
    //   world.markerClickEmulator2Park(parkClickData, parkOption)
  } else {
    setTimeout(() => {
      loadPark()
    }, 300)
  }
}

function initPark() {
  console.log('initPark')
  const dom3d = document.getElementById('dom3d')
  /** 
    Liam  let park: Park = new Park(parkOption, oss0001, dom3d) 
     park.parkEntry()
    */
  let park: IDC.Park = new IDC.Park(parkOption, parkClickData, dom3d)
  park.createPark()
}
</script>

<style lang="scss">
.container {
  color: white;
  width: 1200px;
  height: 85vh;
  overflow: hidden;
  display: block;
}
.loading_mask {
  position: absolute;
  bottom: 0px;
  left: 0;
  top: 0px;
  right: 0;
  color: #c9c9c9;
  font-size: 13px;
  backdrop-filter: blur(10px);
  background-color: rgb(21, 25, 31);
  background-image: url('/public/sandbox/sample/image/loading.gif');
  background-repeat: no-repeat;
  background-position: center;
  z-index: 5;
}
.loading_mask label {
  position: absolute;
  bottom: 15px;
}
.loading_mask #loadNum {
  position: absolute;
  bottom: 15px;
  font-size: 16px;
  color: #00ffbb;
  font-weight: 500;
  margin-left: 200px;
}
.loading_mask #totalNum {
  position: absolute;
  bottom: 15px;
  font-size: 12px;
  color: #8e9099;
  font-weight: lighter;
  margin-left: 220px;
}
.loading_mask #loadingBarBG {
  width: calc(100% - 10px);
  height: 5px;
  border-radius: 5px;
  border: #8e9099 0px solid;
  box-shadow: 0 0 4px 1px #8e9099 inset;
  background-image: -webkit-linear-gradient(
    left,
    rgba(47, 229, 255, 0.1),
    rgba(47, 229, 255, 0) 25%,
    rgba(47, 229, 255, 0.1) 50%,
    rgba(47, 229, 255, 0) 75%,
    rgba(47, 229, 255, 0.1)
  );
  -webkit-background-size: 200% 100%;
  animation: masked-animation 3s infinite linear;
  position: absolute;
  bottom: 10px;
}
.loading_mask #loading {
  width: 0;
  max-width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 5px;
  margin: 1px;
  background: linear-gradient(90deg, #18728c 0%, #18728c 70%, #00f9ff 90%, #ffffff 100%);
}
</style>